<template>
	<view>
		<nawsTabBar :tabList="tabList" :tabIndex="tabIndex" @changeTab="changeTab"></nawsTabBar>
		<swiper class="swiper-box" :style="{height:swiperHeight+'px'}" :current="tabIndex" @change="tabchange">
			<swiper-item class="swiper-item">
				<scroll-view class="scroll-v list" scroll-y @scrolltolower="loadMore">
					<!-- 列表页 -->
					<block v-for="(item,index) in followlist.dataList" :key="index">
						<commonList :item="item"></commonList>
					</block>
					<!-- 上拉加载 -->
					<loadMore :loadtext="followlist.loadtext"></loadMore>
				</scroll-view>

			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view class="scroll-v list" scroll-y>
					<view class="talkBox">
						<view class="talkbox-search">
							<input class="uni-input" confirm-type="search" placeholder="搜素内容" placeholder-class="icon iconfont icon-sousuo talkSearch" />
						</view>
						<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
							<swiper-item v-for="(item,index) in swipeList" :key="index">
								<view class="swiper-item">
									<image :src="item.src" mode="widthFix" lazy-load></image>
								</view>
							</swiper-item>
						</swiper>
						<!-- 热门分类 -->
						<view class="popularBox">
							<view>
								<view>热门分类</view>
								<view @tap="toToppic">
									更多
									<view class="icon iconfont icon-jinru"></view>
								</view>
							</view>
							<view>
								<view>最新</view>
								<view>游戏</view>
								<view>情感</view>
								<view>打卡</view>
								<view>故事</view>
								<view>喜爱</view>
							</view>
						</view>
						<view class="recentBox">
							<view class="recent-title">最近更新</view>
							<block v-for="(item,index) in recentList" :key="index">
								<recentList :item="item"></recentList>
							</block>

						</view>
					</view>

				</scroll-view>

			</swiper-item>
		</swiper>

	</view>
</template>

<script>
	import nawsTabBar from '../../components/news/news-navbar.vue';
	import commonList from '../../components/common/common-list.vue';
	import loadMore from '../../components/common/load-more.vue';
	import recentList from '../../components/news/recent-list.vue'
	export default {
		data() {
			return {
				swiperHeight: 500,
				tabIndex: 0,
				tabList: [{
					id: 1,
					text: '关注'
				}, {
					id: 2,
					text: '话题'
				}],
				followlist: {
					loadtext: '上拉加载更多',
					dataList: [{
							userheadpic: '../../static/img/userpic/11.jpg',
							userhead: '扯淡的你',
							sex: 0, //0男
							userage: '15',
							isfollow: false,
							usertext: '花想一双月相容onLaunch	当uni-app 初始化完成时触发（全局只触发一次）',
							userType: '0', //0img 1 video2发布，
							userPic: '../../static/img/datapic/14.jpg',
							useraddress: '北京 门头沟',
							userinfo: {
								forward: 20,
								news: 35,
								fabulous: 2222
							}
						},
						{
							userheadpic: '../../static/img/userpic/13.jpg',
							userhead: '小甜甜',
							sex: 1,
							userage: '15',
							isfollow: false,
							usertext: '花想一双月相容onLaunch	当uni-app 初始化完成时触发（全局只触发一次）',
							userType: '1', //0img 1 video2发布，
							userPic: '../../static/img/datapic/15.jpg',
							userPlayNum: '20w',
							userplayLong: '2:45',
							useraddress: '北京 门头沟',
							userinfo: {
								forward: 20,
								news: 35,
								fabulous: 2222
							}
						},
						{
							userheadpic: '../../static/img/userpic/16.jpg',
							sex: 1,
							userhead: '扯淡的你',
							userage: '15',
							isfollow: true,
							usertext: '花想一双月相容onLaunch	当uni-app 初始化完成时触发（全局只触发一次）',
							userType: '3', //0img 1 video2发布，
							userPic: '../../static/img/datapic/17.jpg',
							userPlayNum: '20w',
							userplayLong: '2:45',
							useraddress: '北京 门头沟',
							usertype3: {
								img: '../../static/img/datapic/20.jpg',
								text: '我喜欢你正如你爱上了她'
							},
							userinfo: {
								forward: 20,
								news: 35,
								fabulous: 2222
							}
						}
					]
				},
				swipeList: [{
						src: '../../static/img/banner1.jpg',
						id: 1
					},
					{
						src: '../../static/img/banner2.jpg',
						id: 2
					},
					{
						src: '../../static/img/banner3.jpg',
						id: 3
					},
				],
				recentList: [{
						titlePic: '../../static/img/topicpic/11.jpeg',
						title: '话题名称',
						desc: '话题描述',
						total: '220',
						nowtatal: '555'
					},
					{
						titlePic: '../../static/img/topicpic/1.jpeg',
						title: '伤感与生俱来',
						desc: '缘来缘去缘如水',
						total: '2899',
						nowtatal: '1'
					},
					{
						titlePic: '../../static/img/topicpic/2.jpeg',
						title: '天天打卡',
						desc: '天梯第一',
						total: '965456',
						nowtatal: '121'
					},
					{
						titlePic: '../../static/img/topicpic/3.jpeg',
						title: '咱们结婚吧',
						desc: '撒一把狗娘',
						total: '220',
						nowtatal: '555'
					}
				]
			}
		},
		components: {
			nawsTabBar,
			commonList,
			loadMore,
			recentList
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res.windowHeight)
					console.log(res.screenHeight)
					let height = res.windowHeight - uni.upx2px(80)
					this.swiperHeight = height;
				}
			});
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index;
			},
			//滑动改变
			tabchange(e) {
				console.log(e)
				this.tabIndex = e.detail.current;
			},
			//点击话题分类
			toToppic(){
				uni.navigateTo({
					url: 'toppic',
				
				});
			},
			//上拉加载
			loadMore() {
				if (this.followlist.loadtext != "上拉加载更多") {
					return
				}
				//修改状态
				this.followlist.loadtext = "加载中...";
				setTimeout(() => {
					//获取完成
					let obj = {
						userheadpic: '../../static/img/userpic/13.jpg',
						userhead: '小甜甜',
						sex: 1,
						userage: '15',
						isfollow: false,
						usertext: '花想一双月相容onLaunch	当uni-app 初始化完成时触发（全局只触发一次）',
						userType: '1', //0img 1 video2发布，
						userPic: '../../static/img/datapic/15.jpg',
						userPlayNum: '20w',
						userplayLong: '2:45',
						useraddress: '北京 门头沟',
						userinfo: {
							forward: 20,
							news: 35,
							fabulous: 2222
						}
					}
					this.followlist.dataList.push(obj);
					this.followlist.loadtext = "上拉加载更多"
				}, 1000)
				// this.followlist.loadtext="我也是有底线的"
			}

		}
	}
</script>

<style lang="scss">
	.scroll-v {
		height: 100%;
	}

	.talkBox {
		padding: 0 10px;
	}

	.talkbox-search {
		padding: 20upx 0;

		.talkSearch {
			font-size: 20upx;
			text-align: center;
		}
	}

	.talkbox-search input {
		border-radius: 4px;
		background-color: #F4F4F4;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
		border-radius: 4px;
	}

	.popularBox {
		margin-top: 10upx;
		padding: 20upx 0;
		border-top: 1px solid #F3F3F3;
		border-bottom: 1px solid #F3F3F3;

		&>view:first-child {
			display: flex;
			justify-content: space-between;

			&>view:nth-of-type(2) {
				color: #CCCCCC;
				display: flex;
			}
		}

		&>view:nth-of-type(2) {
			margin-top: 20upx;
			display: flex;

			&>view {
				flex: 1;
				background-color: #CCCCCC;
				text-align: center;
				margin: 0 4upx;
				border-radius: 4px;
			}
		}
	}

	.recentBox {
		padding: 20upx 0;
		.recent-title {
			font-size: 30upx;
			padding: 10upx 0;
		}
	}
</style>
